<template>
  <div class="button_but">
    <!-- 头部导航区域 -->
    <el-row class="nav_top">
      <el-col>
        <el-menu
          :default-active="types.type_id"
          class="el-menu-demo"
          mode="horizontal"
          background-color='#fff'
          text-color="#222"
          active-text-color="#ffd04b">
          <el-menu-item :index="item.id" v-for='item of typelist' :key='item.id' @click='typeslink(item.id)'>{{item.type}}</el-menu-item>
        </el-menu>
      </el-col>
      <el-col>
        <el-row class="content">
          <el-col :span='12'>
            <el-input v-model="types.query" clearable @clear='sousu' placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span='1'>
            <el-button type="primary" @click="sousu">搜索</el-button>
          </el-col>
        </el-row>
      </el-col>
     <el-col :span='6' class="button">
       <div v-if="user==null" style="width:100%">
        <el-button type="primary" size='mini' @click="login">登录</el-button>
         <el-button type="primary" size='mini' @click="register">注册</el-button>
       </div>
       <div v-else>
         <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{user.nikiname || ''}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command='2'>个人主页</el-dropdown-item>
            <el-dropdown-item command='3'>设置</el-dropdown-item>
            <el-dropdown-item command='1'>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
       </div>
     </el-col>
    </el-row>
    <!-- 内容区域 -->
    <router-view></router-view>
    <!-- 回到顶部按钮 -->
     <el-backtop style="font-size:12px" target><i class="el-icon-top"></i></el-backtop>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      activeIndex2:'1',//当前激活菜单的index,
      input:'',
      typelist:[
        {id:'1',type:'悦读'},
        {id:'2',type:'情感'},
        {id:'3',type:'校园'},
        {id:'4',type:'连播'},
        {id:'5',type:'音乐'},
        {id:'6',type:'Labs'},
      ],
      is:false,
      types:{
        query:'',
        type_id:'1',
        page:1,
      },
      // 文章总数
      total:0,
      // 文章列表
      list:[],
      user:{}

    }
  },
  methods:{
    // 切换类型
    typeslink(id){
     this.$router.push({
       name:'list',
       params:{
         id:id,
         query:this.types.query
       }
     })
    },
    // 查询
    sousu(){
     this.typeslink(this.types.type_id)
    },
    // 注册
    register(){
      this.$router.push('/register')
    },
    // 登录
    login(){
      this.$router.push('/login')
    },
    // 退出
    handleCommand(key){
      console.log(key)
      if(key==1){
        localStorage.clear()
        this.user=null
      }else if(key==2){
        this.$router.push('/personal')
      }

    }
  },
  created(){
    this.types.type_id=this.$route.params.id
    this.user=JSON.parse(localStorage.getItem('user'))
  },
  watch:{
    '$route'(to,form){
      this.types.type_id=to.params.id
    }
  }
}
</script>

<style lang="less" scoped>
.w{
  width:1000px;
  margin:0 auto;
}
.content_w{
  margin-top: 30px;
}
.nav_top{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  min-width: 1200px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 999;
  .button{
    display: flex;
  }
  .content{
    display: flex;
    padding: 0 10px;
  }
}

</style>
